<template>
  <div>
    <div class="btnList">
      <el-button type="primary" @click="getComponent('Sortable')">排序</el-button>
    </div>

    <keep-alive>
      <transition enter-active-class="animated zoomInDown" leave-active-class="animated zoomOutDown" mode="out-in">
        <component :is="component"></component>
      </transition>
    </keep-alive>
    <div id="share" @click="share">分享</div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import Sortable from "../../components/jquery/Sortable.vue";
export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: { Sortable },
  data() {
    // 这里存放数据
    return {
      component: "",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getComponent(str) {
      this.component = str;
    },
    share() {
      console.log("share");
      let me = this;
      let host = window.location.host; //返回url 的主机部分，例如：mp.csdn.net
      let hostname = window.location.hostname; //返回mp.csdn.net
      let href = window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
      let pathname = window.location.pathname; //返回/a/index.php或者/index.php
      let protocol = window.location.protocol; //返回url 的协议部分，例如： http:，ftp:，maito:等等。
      let port = window.location.port; //url 的端口部分，如果采用默认的80端口，那么
      let query = me.$route.query;
      let path = me.$route.path;

      let urlName = protocol + "//" + host + "/#" + path;
      if (me.component) {
        urlName += "?q=" + me.component;
      }
      console.log("urlName", urlName);
      this.$copyText(urlName).then(
        function (e) {
          me.$notify({
            title: "成功",
            message: "网站地址已复制",
            type: "success",
          });
          console.log(e);
        },
        function (e) {
          me.$notify({
            title: "成功",
            message: "复制失败",
            type: "error",
          });
          console.log(e);
        }
      );
    },
  },
};
</script>

<style>
#share {
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%;
  background-color: #007aff;
  color: #fff;
  font-size: 14px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
